<template>
  <div>
    <el-form inline
             size="mini">
      <el-form-item label="年度">
        <el-select v-model="yearMon"
                   clearable>
          <el-option v-for="(item, index) in yearMonList"
                     :key="index"
                     :value="item"
                     :label="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公司名称">
        <el-input placeholder="请输入"
                  v-model="companyName"
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="项目名称">
        <el-input placeholder="请输入"
                  v-model="projectName"
                  clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="query">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="addcontract">新增</el-button>
      </el-form-item>
    </el-form>
    <Ca-rule-table :DataList="contractList"
                   :header="header"
                   @delete="delcontract"
                   :headle="headle"
                   @checkleave="checkDetails"></Ca-rule-table>
    <paging :currentpage="currentpage"
            :currentlimit="currentlimit"
            :total="total"
            @setpage="getpage"
            @setlimit="getlimit"></paging>

    <el-dialog :visible.sync="isopen"
               title="合同信息"
               top="8vh">
      <echarts :propsList="propsList"
               :setform="contractform"
               @setDate="submit"
               :rows="rows"
               :Type="Type"></echarts>
    </el-dialog>
  </div>
</template>

<script>
import Echarts from "./components/echarts";
import {
  apicontractPayLists,
  apicontractPayList,
  apidelete_Contract,
  apisaveContract,
  apicontractPayNew
} from "@/request/api.js";
export default {
  name: "payContractManage",
  data () {
    return {
      propsList: [
        ["合同编号", "manage_contract_num"],
        ["公司名称", "manage_contract_company", "select"],
        ["项目名称", "manage_contract_name"],
        ["发包方（甲方）", "manage_contract_firstParty"],
        ["项目地址", "manage_contract_address"],
        ["合同开始时间", "manage_contract_startTime", "date"],
        ["合同结束时间", "manage_contract_endTime", "date"],
        ["合同金额", "manage_contract_amount"],
        ["签证金额", "manage_contract_visaAmount"],
        ["备注", "manage_contract_remark"]
      ],
      currentlimit: 15,
      currentpage: 1,
      currentlimit2: 15,
      currentpage2: 1,
      total: 15,
      header: [
        ["合同编号", "manage_contract_num", 80],
        ["公司名称", "company_name", 90],
        ["项目名称", "manage_contract_name", 90],
        ["发包方（甲方）", "manage_contract_firstParty", 140],
        ["项目地址", "manage_contract_address", 90],
        ["合同开始时间", "manage_contract_startTime", 90],
        ["合同结束时间", "manage_contract_endTime", 90],
        ["合同金额", "manage_contract_amount", 90],
        ["签证金额", "manage_contract_visaAmount", 90],
        ["合同总金额", "manage_contract_amount", 90],
        ["备注", "manage_contract_remark", 90]
      ],
      contractList: [],
      headle: ["查看", "删除"],
      isopen: false,
      yearMon: "",
      yearMonList: [],
      companyName: "",
      projectName: "",
      contractform: {},
      rows: [],
      Type: ""
    };
  },
  components: {
    Echarts
  },
  created () {
    this.getPayList();
    this.getyears();
  },
  methods: {
    query () {
      this.currentlimit = 15;
      this.currentpage = 1;
      this.getPayList();
    },
    //提交保存
    submit (data) {
      apisaveContract(data).then(res => {
        this.$message.success(res.msg);
        this.getPayList();
        this.isopen = false;
      });
    },
    //删除指定合同
    delcontract (e) {
      this.$confirm("确定删除" + e.manage_contract_num + "这份合同吗？")
        .then(() => {
          apidelete_Contract({
            manage_contract_id: e.manage_contract_id
          }).then(res => {
            this.$message.success(res.msg);
            this.contractList = this.contractList.filter(
              item => item.manage_contract_id != e.manage_contract_id
            );
          });
        })
        .catch(() => { });
    },
    getpage (e) {
      this.currentpage = e;
      this.getPayList();
    },
    getlimit (e) {
      this.currentlimit = e;
      this.getPayList();
    },
    getPayList () {
      apicontractPayLists({
        rows: this.currentlimit,
        page: this.currentpage,
        company_name: this.companyName,
        manage_contract_name: this.projectName,
        yearMon: this.yearMon
      }).then(res => {
        this.total = res.total;
        this.contractList = res.rows;
      });
    },
    getyears () {
      apicontractPayList().then(res => {
        this.yearMonList = res.yearMon.map(item => item.yearMon);
      });
    },
    checkDetails (row) {
      apicontractPayNew({ manage_contract_id: row.manage_contract_id }).then(
        res => {
          console.log(res);
          this.contractform = res.data;
          this.rows = res.rows.rows;
        }
      );
      this.Type = "check";
      this.isopen = true;
    },
    addcontract () {
      this.contractform = {
        manage_contract_num: "",
        company_name: "",
        manage_contract_name: "",
        manage_contract_firstParty: "",
        manage_contract_address: "",
        manage_contract_startTime: "",
        manage_contract_endTime: "",
        manage_contract_amount: 0,
        manage_contract_visaAmount: 0,
        manage_contract_remark: ""
      };
      this.Type = "add";
      this.isopen = true;
    }
  }
};
</script>

<style lang="scss" scoped></style>
